🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-24802

• build(cli): integrate nx #16648
• build(web): integrate nx #16706
• build(desktop): integrate nx #16860

📔 Objective

Enable Nx builds in the browser extension. For example:

# basic commands
npx nx serve browser
npx nx build browser
npx nx test browser
npx nx lint browser

# target the firefix-mv2-dev build 
npx nx serve browser --configuration=firefox-mv2-dev

# targeting a production build (no "dev" suffix)
npx nx build browser --configuration=firefox-mv2

Most complexity here is that we need to support the pre-nx build pipelines for a while, so we have to juggle both configurations. The recent refactor of our webpack config to a webpack config factory was pretty helpful here. I added some optional parameters that come from Nx in Nx builds. Most lines are just changes from relative paths to absolute paths to account for the fact that npm and nx have different working directories.

Once we update CI to use Nx builds exclusively, and the Nx builds have had time to get battle tested, we'll remove the old npm builds and this configuration will get much simpler.

Otherwise, this is a fairly straightforward port of the build commands from extension's package.json into a functioning project.json. It uses the standard executors and follows Nx conventions for this kind of build without much else that is special.

📸 Screenshots

running npx nx test browser

running npx nx lint browser

running npx nx build browser --configuration=safari-commercial

*a running local chrome extension built with npx nx serve browser

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes